<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css3 &amp; Javscript ColorPicker demo</title>
<style>
#hue {
	width:30px;
	height:200px;
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #F00), color-stop(0.166, #FF0), color-stop(0.333, #0F0), color-stop(0.5, #0FF), color-stop(0.666, #00F), color-stop(0.833, #F0F), color-stop(1, #F00));
	background-image: -moz-linear-gradient( center top, #F00 0%, #FF0 16.6%, #0F0 33.3%, #0FF 50%, #00F 66.6%, #F0F 83.3%, #F00 100%);
}
#box {
	margin:0;
	padding:0;	
	float:left;
	width: 200px;
	height: 200px;
	cursor:crosshair;
	background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0,rgba(255,255,255,0)), color-stop(1,rgba(255,255,255,1)));
	background-image: -moz-linear-gradient( center top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

}
#box:before {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	background-image: -webkit-gradient( linear,right top,left top, color-stop(0,rgba(0,0,0,0)), color-stop(1,rgba(0,0,0,1)));
	background-image: -moz-linear-gradient( right center, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
#huepos{
	position: relative;
	border-bottom:4px solid transparent;
	border-top:4px solid transparent;
	border-left:8px solid #000;
	border-right:8px solid #000;
}
#crosshair{
	position: relative;
	border:1px solid #FFF;
	outline:1px solid #000;
	width:8px;
	height:8px;
}
</style>
</head>
<body>
<h1>Javascript ColorPicker demo</h1>
<p>Esta es una demostraci&oacute;n de un ColorPicker hecho unicamente con Javascript y css, nada de imagenes. El c&oacute;digo esta hecho para ser de ejemplo y no tiene documentacion, pero no dude en usarlo bajo la licencia BSD nueva.</p>
<table cellpadding="0">
<tr>
<td id="sv"><div id="box"></div><div id="crosshair"></div></td>
<td><div id="hue"><div id="huepos"></div></div></td>
</tr>
<tr>
<td colspan="2" id="previewcolor"><input id="inputBox" type="text" class="color" value="#3599D5"></td>
</tr>
</table>
<script type="text/javascript">
function HsvToHex(hsv)
{
    var r,g,b;
    if (hsv[2] == 0.0)
		r = g = b = 0;
    else
    {
        var i = Math.floor(hsv[0] * 6);
        var f = (hsv[0] * 6) - i;
        var p = hsv[2] * (1 - hsv[1]);
        var q = hsv[2] * (1 - (hsv[1] * f));
        var t = hsv[2] * (1 - (hsv[1] * (1 - f)));
        switch (i)
        {
            case 1: r = q; g = hsv[2]; b = p; break;
            case 2: r = p; g = hsv[2]; b = t; break;
            case 3: r = p; g = q; b = hsv[2]; break;
            case 4: r = t; g = p; b = hsv[2]; break;
            case 5: r = hsv[2]; g = p; b = q; break;
            case 6:
            case 0: r = hsv[2]; g = t; b = p; break;
        }
    }
	r = parseInt(r*255).toString(16);
    g = parseInt(g*255).toString(16);
	b = parseInt(b*255).toString(16);
	if (r.length === 1)  r = "0" + r;
	if (g.length === 1)  g = "0" + g;
	if (b.length === 1)  b = "0" + b;

	return (r + g + b).toUpperCase();
}

function HexToHsv(hex)
{
	var r = parseInt(hex.substring(0,2), 16)/255;
    var g = parseInt(hex.substring(2,4), 16)/255;
    var b = parseInt(hex.substring(4,6), 16)/255;
    var max = Math.max(Math.max(r, g), b);
    var min = Math.min(Math.min(r, g), b);
    var h,s;
    var v = max;
    if (min == max)
		h = s = 0;
    else
    {
        var delta = (max - min);
        s = delta / max;
		
        if (r == max)		h = (g - b) / delta;
        else if(g == max)	h = 2 + ((b - r) / delta);
        else 				h = 4 + ((r - g) / delta);
        
        h /= 6;
        if (h < 0) h += 1;
        if (h > 1) h -= 1;
        
    }
    return [h,s,v];
}

function DragHandler(el, handler)
{
    function fixCoords(x, y)
    {
		x +=  document.body.scrollLeft;
        y +=  document.body.scrollTop;
		
		var parent = el;
		do {
			x -= parent.offsetLeft;
			y -= parent.offsetTop;
		} while (parent = parent.offsetParent)
        if (x < 0) x = 0;
		else if (x > el.offsetWidth - 1) x = el.offsetWidth - 1;
        if (y < 0) y = 0;
        else if (y > el.offsetHeight - 1) y = el.offsetHeight - 1;
        return [x, y];
    }
    function mouseDown(ev)
    {
        handler(fixCoords(ev.clientX, ev.clientY));

        function moveHandler(ev)
        {
			handler(fixCoords(ev.clientX, ev.clientY));
        }
        function upHandler(ev)
        {
			document.removeEventListener('mouseup',upHandler, false);
			document.removeEventListener('mousemove',moveHandler, false);
        }
		document.addEventListener('mouseup', upHandler, false);
		document.addEventListener('mousemove', moveHandler, false);
        if (ev.preventDefault) ev.preventDefault();
    }
	el.addEventListener('mousedown', mouseDown, false);
    el.onmousedown = function(e) { return false; };
    el.onselectstart = function(e) { return false; };
    el.ondragstart = function(e) { return false; };
}

function makeColorPicker()
{
    var hex, hsv = [];
	var inputBox = document.getElementById('inputBox');
	var prev = document.getElementById("previewcolor");
	var hue = document.getElementById('hue');
	var huePos = document.getElementById('huepos');
	var satVal = document.getElementById('box');
	var sv = document.getElementById('sv');
	var crossHairs = document.getElementById('crosshair');
	
    function Update()
    {
        prev.bgColor = '#' + hex;
        inputBox.value = '#' + hex;
        sv.style.background = '#' + HsvToHex([hsv[0], 1, 1]);
        crossHairs.style.left = ((hsv[2]*200)-5).toString() + 'px';
        crossHairs.style.top = (((1-hsv[1])*200)-5).toString() + 'px';
        huePos.style.top = ((hsv[0]*200)-4).toString() + 'px';
    }
    function hexChanged()
    {
        hsv = HexToHsv(hex);
        Update();
    }
    function hsvChanged()
    {
        hex = HsvToHex(hsv);
        Update();
    }
    function satValDragged(coord)
    {
        hsv[1] = 1-(coord[1]/199);
        hsv[2] = (coord[0]/199);
        hsvChanged();
    }
	function hueDragged(coord)
    {
        hsv[0] = coord[1]/199;
        hsvChanged();
    }
    DragHandler(satVal, satValDragged);
    DragHandler(hue, hueDragged);

    function inputBoxChanged()
    {
		var str = inputBox.value;
		if (str.substr(0, 1) == '#') str = str.substr(1);
		if(str.length==6)
		{
        	hex = str;
        	hexChanged();
		}
    }
    inputBox.addEventListener('keyup', inputBoxChanged,false);
    inputBox.size = 8;    
    inputBoxChanged();
}

window.addEventListener('load',function(){makeColorPicker()},false);
</script>
</body>
</html>